import React from 'react'
import { 
  Button, 
  Select, 
  Tag, 
  Dropdown, 
  Typography,
  Space
} from 'antd'
import { 
  FireOutlined, 
  ThunderboltOutlined,
  SaveOutlined,
  ReloadOutlined,
  SendOutlined,
  CompareOutlined,
  SafetyCertificateOutlined,
  HistoryOutlined
} from '@ant-design/icons'

const { Title } = Typography
const { Option } = Select

/**
 * 移动端优化的热点创作编辑器头部组件
 */
export const MobileHotCreatorHeader: React.FC<{
  hotTopicContext: any
  selectedModel: string
  modelsLoading: boolean
  getHealthyModels: () => any[]
  handleModelChange: (value: string) => void
  setHotTopicVisible: (value: boolean) => void
  toolsMenu: any
  saveDraft: () => void
  loadDraft: () => void
}> = ({
  hotTopicContext,
  selectedModel,
  modelsLoading,
  getHealthyModels,
  handleModelChange,
  setHotTopicVisible,
  toolsMenu,
  saveDraft,
  loadDraft
}) => {
  return (
    <div className="mobile-editor-header bg-white shadow-sm p-3 sticky top-0 z-40">
      {/* 标题行 */}
      <div className="flex justify-between items-center mb-3">
        <Title level={4} className="m-0 flex items-center text-base">
          <FireOutlined className="mr-2" style={{ color: '#ff4d4f', fontSize: '16px' }} />
          热点创作工作台
        </Title>
        {hotTopicContext && (
          <Tag color="red" icon={<FireOutlined />} className="text-xs">
            热点
          </Tag>
        )}
      </div>
      
      {/* 工具按钮行 - 2x2网格 */}
      <div className="grid grid-cols-2 gap-2 mb-2">
        <Button 
          type="primary"
          icon={<FireOutlined />} 
          onClick={() => setHotTopicVisible(true)}
          danger
          size="middle"
          block
          className="h-10"
        >
          选择热点
        </Button>
        
        <Dropdown overlay={toolsMenu} trigger={['click']} placement="bottomRight">
          <Button 
            icon={<ThunderboltOutlined />} 
            size="middle" 
            block
            className="h-10"
          >
            AI工具
          </Button>
        </Dropdown>
      </div>
      
      {/* 模型选择和草稿管理行 */}
      <div className="flex gap-2">
        <Select
          value={selectedModel}
          onChange={handleModelChange}
          className="flex-1"
          placeholder="选择AI模型"
          loading={modelsLoading}
          size="middle"
          dropdownStyle={{ maxHeight: 300 }}
        >
          {getHealthyModels().map(config => (
            <Option key={config.id} value={config.id}>
              <span className="text-sm">
                {config.displayName || config.modelName}
              </span>
            </Option>
          ))}
        </Select>
        
        <Space.Compact>
          <Button 
            icon={<SaveOutlined />} 
            onClick={saveDraft} 
            size="middle" 
            title="保存草稿"
            className="px-3"
          />
          <Button 
            icon={<ReloadOutlined />} 
            onClick={loadDraft} 
            size="middle" 
            title="恢复草稿"
            className="px-3"
          />
        </Space.Compact>
      </div>
    </div>
  )
}

/**
 * 移动端优化的底部操作栏
 */
export const MobileHotCreatorActions: React.FC<{
  content: string
  generatedContent: string
  selectedModel: string
  isGenerating: boolean
  isCheckingQuality: boolean
  handleGenerate: () => void
  handleStopGeneration: () => void
  handleModelComparison: () => void
  checkContentQuality: (content: string) => void
}> = ({
  content,
  generatedContent,
  selectedModel,
  isGenerating,
  isCheckingQuality,
  handleGenerate,
  handleStopGeneration,
  handleModelComparison,
  checkContentQuality
}) => {
  return (
    <div className="mobile-editor-actions fixed bottom-0 left-0 right-0 bg-white shadow-lg p-3 z-50 safe-area-bottom">
      {/* 功能按钮行 */}
      <div className="grid grid-cols-3 gap-2 mb-2">
        <Button 
          icon={<CompareOutlined />} 
          onClick={handleModelComparison}
          disabled={!content.trim()}
          size="middle"
          block
          className="text-xs"
        >
          对比
        </Button>
        <Button 
          icon={<SafetyCertificateOutlined />}
          onClick={() => checkContentQuality(generatedContent)}
          disabled={!generatedContent}
          loading={isCheckingQuality}
          size="middle"
          block
          className="text-xs"
        >
          检测
        </Button>
        <Button 
          icon={<HistoryOutlined />}
          size="middle"
          block
          className="text-xs"
        >
          历史
        </Button>
      </div>
      
      {/* 主操作按钮 */}
      {isGenerating ? (
        <Button 
          danger
          onClick={handleStopGeneration}
          size="large"
          block
          className="h-12 font-medium"
        >
          停止生成
        </Button>
      ) : (
        <Button 
          type="primary"
          icon={<SendOutlined />} 
          onClick={handleGenerate}
          loading={isGenerating}
          disabled={!content.trim() || !selectedModel}
          size="large"
          block
          className="h-12 font-medium"
        >
          开始生成
        </Button>
      )}
    </div>
  )
}

export default {
  MobileHotCreatorHeader,
  MobileHotCreatorActions
}